<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head><!DOCTYPE html>
<html lang="en" class="no-ie" style="overflow:hidden;">
	<head>
		<meta charset="UTF-8">
		<title>同期全国蔬批溯源预警</title>
		<script>
			"object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(ue4=ue.interface.broadcast);
		</script>
		<script src="./dist/echarts.min.js"></script>
		<script src="./static/js/jquery.min.js"></script>
		<script src="./static/js/FuncTest.js"></script>
		<script src="./static/js/PortChart.js"></script>
		<script>
			$(function() {
				ue4("getSize",{mes:"get windows size"});
				ue4("getColor",{mes:"get all color"});
				ue4("getData",{mes:"get all data"});
				ue4("beginSize",{mes:BeginSize[0],mes2:BeginSize[1]});
				ue4("beginSizeY",{mes:BeginSize});
			});
			/*$(function () {
			    
			});*/
		</script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

		</style>
	</head>
	<body>
		<div id="main" ></div>
		<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		-->
		<script>
			let BeginSize = [340,220];
			let myChart = null;
			let myColor = ['#F1644E','#E58C51','#FFEC8A','#63FFCA','#01ECFF','#3E98FF'];
			let datain = [115,51,51,42,41,37,35,35,34,25];
			let datacat = ['小葱','白萝卜','不拆箱','洋葱','葱','尖椒','青菜','茄子','带豆','芹菜'];

			function fresh() {
				let maxNum=Math.max(...datain)
				let changeData=[]
				datain.forEach((item,index) => {
					let colorlist=['#FF8585','#D77D3A']
					if(index>2){
						colorlist=['#94C2FF','#2682FF']
					}
					changeData.push({
						value: item,
						itemStyle:{
							normal: {
								borderRadius: 3,
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{ offset: 0, color: colorlist[0] },
									{ offset: 1, color: colorlist[1] }
								]),
							}
						}
					})
				})
				let option = {
					backgroundColor:'rgba(13,29,70,0.75)',
					// 可以调节间距
					grid: [{
						show: false,
						left: '5%',
						top: '5%',
						bottom: '3%',
						containLabel: true,
						width: '84%',
						height:'95%'
					},{
						show: false,
						left: '92%',
						top: '5%',
						containLabel: true, 
						width: '10%',
						height:'85%'
					} ],
					xAxis: [{
						gridIndex: 0,
						type: 'value',
						show: false,
						max:maxNum+20
					},{ // 右侧区域
						gridIndex: 1,
						show: false, // 不显示X轴
					},],
					yAxis: [{
						gridIndex: 0,
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#FFFFFF',
							fontSize: 12,
						},
						type: 'category',
						axisTick: {
							show: false
						},
						inverse: true,
						position: 'left',
						data:datacat,
					},{ // 右侧区域
						gridIndex: 1,
						type: 'category',
						inverse: true,
						position: 'left',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#E2EBF1',
							fontSize: 13,
							lineHeight:15.5
						},
						data: datain
					},],
					series: [{
						name: 'XXX',
						type: 'pictorialBar',
						symbol: 'image://https://s1.ax1x.com/2022/05/27/XeGxiT.png',
						symbolSize: [50, 50],
						symbolOffset: [25, 0],
						symbolPosition: 'end',
						z: 12,
						data:datain
					},
					{
						name: '溯源预警',
						type: 'bar',
						barWidth:7,
						// barGap:22,
						showBackground:true,
						backgroundStyle:{
							borderRadius: 3,
							color:'rgba(50,209,216,0.43)'
						},
						label: {
							show: false
						}, 
						data: changeData,
						
					}]
					
				};
				myChart = echarts.init(document.getElementById('main'));
				myChart.setOption(option);
			}

			fresh();

			
			//浏览器测试用
			change(BeginSize[0],BeginSize[1]);
			changeBorder('red',false,'topl',10);
			//fresh();

			function LinkUE4()
			{
				//alert("I am an alert box!!");
				//ue4("getData2",{mes:"get all data"});
				ue4("CallBack",{},function(v)
				{
					alert("I am an alert box!!");
				});		
			};

			function change(x, y) {
				let div = document.getElementById("main");
				//alert("I am an alert box!!");
				div.style.width = x + "px";
				div.style.height = y + "px";
				var myOption = myChart.getOption();
				myChart.resize();
				let types = []
				myOption.series.forEach((item) => {
					types.push(item.type)
				})
				return types
			}
			
			function changeBorder(x,y,p,n) {
				let div = document.getElementById("main");
				div.style.border =`0px solid ${x}`;
				if(y){
					div.style.borderRadius='10px'
				}else{
					if(p='topl'){
						div.style.borderTopLeftRadius =n+'px';
					}else if(p='topr'){
						div.style.borderTopRightRadius =n+'px';
					}else if(p='bottoml'){
						div.style.borderBottomLeftRadius =n+'px';
					}else if(p='bottomr'){
						div.style.borderBottomRightRadius =n+'px';
					}
				}
				myChart.resize(); 	
			}
			
			ue.interface.ChangeSize = function(data) {
				//alert("I am an alert box!!");
				change(data[0], data[1]);		
				
							
			};

			ue.interface.TransColor = function(data) {
				myColor = data;
			};

			ue.interface.TransColorFresh = function(data) {
				myColor = data;
				fresh();
			};
			
			ue.interface.TransData = function(data)
			{
				//alert(data);
				var obj = JSON.parse(data);
				dataTemp1 = obj.data1;
				dataTemp2 = obj.data2;
				fresh();
			};
			//刷新数据但不刷新动画，只是曲线变化
			ue.interface.Ani = function(data) {
				var myOption = myChart.getOption();
				myChart.setOption(myOption);
			};
			
			//刷新动画且更新数据
			ue.interface.ReAni = function(data) {
				var myOption = myChart.getOption();
				myChart.clear();
				myChart.setOption(myOption);
			};
			
			/************下面数据***********/
			ue.interface.TransData1 = function(data) {
				dataTemp1 = data;
				fresh();
			};

			ue.interface.TransData1 = function(data) {
				dataTemp2 = data;
				fresh();
			};

			ue.interface.titleData1 = function(data) {
				titleshow = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titletext = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titleleft = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titletop = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlebottom = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titleright = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlefsize = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlecolor = data;
				fresh();
			};
			
			ue.interface.legendData1 = function(data) {
				legendshow = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendname = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendleft = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendtop = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendbottom = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendright = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendiWidth = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendiHeight = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendcolor = data;
				fresh();
			};
			
			ue.interface.splitLineData1 = function(data) {
				xsplitLine = data;
				fresh();
			};
			ue.interface.splitLineData1 = function(data) {
				ysplitLine = data;
				fresh();
			};
			
			ue.interface.axisLineData1 = function(data) {
				xaxisLineshow = data;
				fresh();
			};
			ue.interface.axisLineData1 = function(data) {
				yaxisLineshow = data;
				fresh();
			};
			
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelshow = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelfsize = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelcolor = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelshow = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelfsize = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelcolor = data;
				fresh();
			};
			ue.interface.barWidthData1 = function(data) {
				barWidth = data;
				fresh();
			};
			
			
			
		</script>
	</body>
</html>

	<body>
	</body>
</html>
